<template>
  <br />
  <div class="zong">
    <div class="fen">
      <br />
      <div class="pinja">
        <span class="eval-text">评价：</span>
        <div class="star-group">
          <label class="star-radio" for="flexRadioDefault1">
            <input
              class="hidden-radio"
              type="radio"
              name="flexRadioDefault"
              id="flexRadioDefault1"
              v-model="leaves.judge"
            />
            <span class="star">&#9733;</span> &nbsp;五星完美
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <label class="star-radio" for="flexRadioDefault2">
            <input
              class="hidden-radio"
              type="radio"
              name="flexRadioDefault"
              id="flexRadioDefault2"
              v-model="leaves.judge"
            />
            <span class="star">&#9733;</span> &nbsp;四星超棒
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <label class="star-radio" for="flexRadioDefault3">
            <input
              class="hidden-radio"
              type="radio"
              name="flexRadioDefault"
              id="flexRadioDefault3"
              v-model="leaves.judge"
            />
            <span class="star">&#9733;</span> &nbsp;三星合格
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <label class="star-radio" for="flexRadioDefault4">
            <input
              class="hidden-radio"
              type="radio"
              name="flexRadioDefault"
              id="flexRadioDefault4"
              v-model="leaves.judge"
            />
            <span class="star">&#9733;</span> &nbsp;二星良好
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <label class="star-radio" for="flexRadioDefault5">
            <input
              class="hidden-radio"
              type="radio"
              name="flexRadioDefault"
              id="flexRadioDefault5"
              v-model="leaves.judge"
            />
            <span class="star">&#9733;</span> &nbsp;一星一般
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
      </div>
      <br />
      <div class="liuyn">
        <div class="liuyn-wrapper">
          <span class="liuyn-text">留言：</span>
          <textarea
            class="liuyn-textarea"
            id="textarea"
            cols="30"
            rows="5"
            placeholder="请输入内容："
            v-model="leaves.leave"
          ></textarea>
        </div>
      </div>
      <br />
      <div class="tijiaoo">
        <button type="submit" @click="saveLeave()">提交</button>
      </div>
      <br />
    </div>
  </div>
  <LeavesBodyend/>
</template>  
  
<script>
import LeavesBodyend from './LeavesBodyend.vue';

import { http } from "../../utils/http.js";
export default {
components: { LeavesBodyend },
 data() {  
  return {  
     
    leaves: {  
        username: '',  
        judge: '', 
        leave: '',  
         
      },  
    keyWord: "",  
  };  
},  
  created() {
    http
      .request("/getLeavesList")
      .then((res) => {
        if (res.data) {
          this.leaves = res.data;
          console.log(res);
        }
      })
      .catch((error) => {
        // 处理请求错误
        console.error(error);
      });
  },
methods: {  
   saveLeave() {      
    // 创建一个新的叶子节点对象  
    const newLeaf = {  
      username: '', // 你可能需要根据实际情况设置username，或者从其他地方获取  
      judge: this.leaves.judge, // 从当前绑定的对象中获取星级评定  
      leave: this.leaves.leave // 从当前绑定的对象中获取留言  
    };  
      
    http.post("/addLeaves", newLeaf)      
      .then((res) => {      
        if (res.status === 200) {    
          alert("增加成功");      
          this.$router.push("/leave"); // 确保 $router 已导入并在组件中可用    
          // 可能还需要重置表单字段  
          this.leaves.judge = '';  
          this.leaves.leave = '';  
        } else {      
          alert("服务器响应了一个非 200 的状态码");      
        }      
      })      
      .catch((error) => {    
        console.error(error); // 打印错误到控制台    
        alert("增加失败，请检查输入信息或稍后重试"); // 显示错误提示给用户    
      });    
  },  
}  
}  

</script>  
  
<style scoped>
/* 大盒子 */
.zong {
  border: 3px solid #51dde2;
  display: flex;
  flex-direction: column;
  /* 确保左侧边框和子元素有10px距离，通常是通过padding或margin实现 */
  padding-left: 10px;
  margin: 0 auto;
  width: 70%;
  background-color: white; /* 设置整个盒子背景白色 */
  border-radius: 10px; /* 添加圆角 */
}

.fen {
  display: flex;
  flex-direction: column;
}

.eval-text {
  font-size: 18px;
  letter-spacing: 3px;
  margin-right: 10px;
}

/* 评价 */
.pinja {
  display: flex;
  align-items: center; /* 如果需要垂直居中 */
}

.star-group {
  display: flex; /* 星星按钮在一排 */
}

.star-radio {
  display: flex;
  align-items: center;
}

/* 评价按钮 */
.star {
  font-size: 20px;
  color: rgb(186, 234, 242); /* 星星默认颜色 */
}

.hidden-radio:checked + .star {
  color: rgb(249, 119, 5); /* 选中后的星星颜色 */
}

.hidden-radio {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* 留言 */
.liuyn-wrapper {
  display: flex;
  align-items: flex-start; /* 垂直对齐 */
}

.liuyn-text {
  font-size: 20px; /* 设置“留言”俩字20px */
  margin-right: 5px; /* 右侧添加一些间距 */
}

.liuyn-textarea {
  width: 500px; /* 可以考虑移除，让flex来处理宽度 */
  height: 100px;
  resize: none;
  font-size: 15px; /* 文本框里的字大小为15px */
  color: #999; /* 文本框文字颜色为浅灰色 */
  border: 3px solid #8fe1d0;
  padding: 5px; /* 添加内边距以更好地控制文本位置 */
  border-radius: 5px; /* 添加圆角 */
}

/* 尝试设置placeholder样式，但效果可能因浏览器而异 */
.liuyn-textarea::placeholder {
  font-size: 12px; /* placeholder文字大小为12px */
  color: #999; /* placeholder文字颜色为浅灰色 */
  font-style: italic; /* placeholder文字为斜体 */
}

/* 提交按钮 */
.tijiaoo {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-top: 10px; /* 添加一些上边距，以使按钮与文本框分隔开 */
}

.tijiaoo button {
  padding: 10px 20px; /* 添加内边距 */
  border: none; /* 移除边框 */
  background-color: #51dde2; /* 浅蓝色背景 */
  color: white; /* 白色字体 */
  border-radius: 50px; /* 椭圆形按钮 */
  letter-spacing: 2px;

  width: 100px;
  height: 40px;
  line-height: 1; /* 调整行高以适应字体大小 */
  cursor: pointer; /* 添加鼠标悬停时的效果 */
  /* 可选：添加过渡效果使按钮看起来更流畅 */
  transition: background-color 0.3s ease;
}

.tijiaoo button:hover {
  background-color: #0a9ecb; /* 鼠标悬停时改变背景色 */
}
</style>